<template>
  <!-- html -->
  <div class="singer">
    <zeroHeader :zerotitle="zerotitle"></zeroHeader>
    <!-- 选项卡组件 -->
    <zeroTab :tablist="classify" @mycat="getsinger"></zeroTab>
    <!-- 固定的滚动容器 -->
    <div class="wrapper" ref="wrapper" :style="{'bottom':$store.state.curindex!=-1?'40px':''}">
      <mt-spinner :type="2" color="#d43c33" v-if="showspinner"></mt-spinner>
      <!-- 可滚动的容器 -->
      <div class="content">
        <!-- 有歌曲的榜单 -->
        <zeroLoading v-if="artists.length==0"></zeroLoading>
        <div class="ar_container" v-for="(item,index) in classify" :key="index" v-else>
          <transition
            enter-active-class="animated fadeInLeft"
            leave-active-class="animated fadeOutRight"
          >
            <div class="ar_list_box" v-if="curcat==item.cat">
              <div
                class="ar_item"
                v-for="(item,index) in artists"
                :key="index"
                @click="gosingerinfo(item.id)"
              >
                <div class="ar_item_pic">
                  <img v-lazy="item.picUrl+'?param=100y100'" alt />
                </div>
                <div class="ar_item_name">{{item.name}}</div>
              </div>
            </div>
          </transition>
        </div>
        <zeroLoading v-if="pulluploading"></zeroLoading>
        <div v-if="!pullup">没有更多了</div>
      </div>
    </div>
  </div>
</template>


<script>
import BScroll from "better-scroll";
import zeroLoading from "@/components/ZeroLoading.vue";
import zeroHeader from "@/components/ZeroHeader.vue";
import zeroTab from "@/components/ZeroTab.vue";

export default {
  name: "rank",
  data() {
    return {
      zerotitle: "歌手",
      showspinner: false,
      pulluploading: false,
      curcat: 1001,
      artists: [],
      offset: 0,
      pullup: true,
      classify: [
        // { name: "入驻歌手", cat: 5001 },
        { name: "华语男歌手", cat: 1001 },
        { name: "华语女歌手", cat: 1002 },
        { name: "华语组合", cat: 1003 },
        { name: "日本男歌手", cat: 6001 },
        { name: "日本女歌手", cat: 6002 },
        { name: "日本组合", cat: 6003 },
        { name: "韩国男歌手", cat: 7001 },
        { name: "韩国女歌手", cat: 7002 },
        { name: "韩国组合", cat: 7003 },
        { name: "其他男歌手", cat: 4001 },
        { name: "其他女歌手", cat: 4002 },
        { name: "其他组合", cat: 4003 }
      ]
    };
  },
  methods: {
    getsinger(cat, offset) {
      // console.log("cat", cat);
      this.offset = 0;
      this.pullup = true;
      this.artists = [];
      let { singerlist } = this.api;
      this.curcat = cat;
      singerlist.params = {
        cat: this.curcat,
        offset: offset
      };
      this.getsource(singerlist).then(res => {
        console.log("歌手", res.data);
        this.artists = res.data.artists;
      });
      console.log("this.scroll", this.scroll);
      this.scroll.scrollTo(0, 0, 1000, "easing");
      this.scroll.refresh();
    },
    gosingerinfo(id) {
      this.$router.push({
        name: "singerinfo",
        params: {
          id
        }
      });
    }
  },
  created() {
    // this.getsinger(this.curcat, 0); //默认加载第一个华语男歌手

    let { singerlist } = this.api;
    singerlist.params = {
      cat: this.curcat,
      offset: 0
    };
    this.getsource(singerlist).then(res => {
      console.log("歌手", res.data);
      this.artists = res.data.artists;
    });
  },
  // better-scroll的函数
  mounted() {
    this.$nextTick(() => {
      //$refs绑定元素
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.wrapper, {
          //开启点击事件 默认为false
          click: true,
          mouseWheel: true,
          probeType: 3,
          pullUpLoad: {
            threshold: -50
          },
          pullDownRefresh: {
            // 下拉距离超过30px触发pullingDown事件
            threshold: 30,
            // 回弹停留在距离顶部30px的位置
            stop: 30
          }
        });
        //上拉加载
        this.scroll.on("pullingUp", () => {
          console.log("上拉");
          //判断是否还需要加载更多
          if (this.pullup) {
            this.pulluploading = true;
            this.offset += 30;
            let { singerlist } = this.api;
            singerlist.params = {
              cat: this.curcat,
              offset: this.offset
            };
            this.getsource(singerlist).then(res => {
              console.log("歌手", res.data);
              if (res.data.artists.length == 0) {
                this.pullup = false;
              } else {
                res.data.artists.forEach(item => {
                  this.artists.push(item);
                });
              }
            });
          }
          this.scroll.finishPullUp();
          setTimeout(() => {
            // 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则下拉事件只会执行一次
            this.pulluploading = false;
          }, 1500);
        });

        //处理下拉刷新操作
        this.scroll.on("pullingDown", () => {
          this.showspinner = true;
          this.getsinger(this.curcat, 0),
            setTimeout(() => {
              // 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则下拉事件只会执行一次
              this.scroll.finishPullDown();
              this.showspinner = "";
            }, 1500);
        });
      } else if (!this.$refs.wrapper) {
        return;
      } else {
        this.scroll.refresh();
      }
    });
  },
  components: {
    zeroHeader,
    zeroLoading,
    zeroTab
  }
};
</script>

<style lang='scss' scoped>
// css
.singer {
  width: 100%;
  .zerotab {
    position: absolute;
    top: 45px;
  }
  .wrapper {
    position: absolute;
    top: 175px;
    bottom: 0;
    width: 100%;
    overflow: hidden;
    .content {
      .ar_list_box {
        .ar_item {
          display: flex;
          margin: 10px 20px;
          .ar_item_pic {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            overflow: hidden;
            border: 2px solid #dddddd;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .ar_item_name {
            margin-left: 20px;
            font-size: 16px;
            line-height: 50px;
          }
        }
      }
    }
  }
}
</style>
